$block-spacing: 30px;
$inline-spacing: 30px;
$inline-padding: 15px;

.system-home-box{
    padding:30px 0;
}
.setting-home{
    height: 100%;
    width: 100%;
    overflow: auto;
    .home-title{
        margin-bottom: 15px;
        font-weight: var(--tiklab-font-weight-bold);
    }
    .home-icon{
        font-size: 16px;
        padding-right: 5px;
    }
    .home-info{
        flex: 1;
        width: 0;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        -o-text-overflow: ellipsis;
        font-weight: var(--tiklab-font-weight-bold);
        text-align: end;
    }
    .home-licence-box{
        margin-bottom: $block-spacing;
        .home-licence {
            display: flex;
            align-items: center;
            justify-content: space-between;
            background-color: var(--tiklab-gray-600);
            padding: 35px 15px;
            gap: $inline-spacing;
            .home-licence-item{
                display: flex;
                align-items: center;
                gap: $inline-spacing;
                .home-licence-item-level{
                    display: flex;
                    align-items: center;
                    .licence-level-img{
                        width: 28px;
                        height: 28px;
                        margin-right: 8px;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                    .licence-level-info{
                        font-size: 15px;
                        font-weight: var(--tiklab-font-weight-bold);
                    }
                    .licence-level-issuedTime{
                        padding-left: 5px;
                        font-size: 12px;
                        color: #999999;
                    }
                }
                .licence-level-applyAuth{
                    padding-top: 5px;
                    .licence-level-applyAuth-title{
                        padding-right: 5px;
                    }
                    .licence-level-applyAuth-num{

                    }
                }
                .licence-level-info{
                    font-weight: var(--tiklab-font-weight-bold);
                }
            }
            .home-licence-sub{
                cursor: pointer;
                color: var(--tiklab-blue);
            }
        }
    }
    .home-role-box{
        background-color: var(--tiklab-gray-600);
        padding: $inline-padding;
        .home-role{
            .home-role-item{
                display: flex;
                align-items: center;
                padding: 8px 0;
                cursor: pointer;
                .home-label{
                    width: 100px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                &:hover{
                    color: var(--tiklab-blue);
                }
            }
        }
    }
    .home-user-box{
        background-color: var(--tiklab-gray-600);
        padding: $inline-padding;
        .home-user{
            .home-user-item{
                display: flex;
                align-items: center;
                padding: 8px 0;
                cursor: pointer;
                .home-label{
                    width: 100px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                &:hover{
                    color: var(--tiklab-blue);
                }
            }
        }
    }
    .home-message-box{
        background-color: var(--tiklab-gray-600);
        padding: $inline-padding;
        .home-message{
            .home-message-item{
                display: flex;
                align-items: center;
                padding: 8px 0;
                cursor: pointer;
                .home-label{
                    width: 100px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                &:hover{
                    color: var(--tiklab-blue);
                }
            }
        }
    }
    .home-config-box{
        background-color: var(--tiklab-gray-600);
        padding: $inline-padding;
        .home-config{
            .home-config-item{
                display: flex;
                align-items: center;
                padding: 8px 0;
                cursor: pointer;
                .home-label{
                    width: 100px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                &:hover{
                    color: var(--tiklab-blue);
                }
            }
        }
    }
    .home-security-box{
        background-color: var(--tiklab-gray-600);
        padding: $inline-padding;
        .home-security{
            .home-security-item{
                display: flex;
                align-items: center;
                padding: 8px 0;
                cursor: pointer;
                .home-label{
                    width: 100px;
                    margin-right: 10px;
                    cursor: pointer;
                }
                &:hover{
                    color: var(--tiklab-blue);
                }
            }
        }
    }
    .home-quick-box{
        margin-top: 30px;
        .home-quick{
            .home-quick-item{
                display: flex;
                align-items: center;
                justify-content: space-between;
                background-color: var(--tiklab-gray-600);
                padding: 30px $inline-padding;
                cursor: pointer;
                &:hover{
                    color: var(--tiklab-blue);
                }
                .home-quick-item-title{
                    flex: 1;
                }
            }
        }
    }
    .home-chunk-box{
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: $inline-spacing;
        white-space: nowrap;
    }

}


